前言

這幾天也是記錄一些針對部分功能的小專案，
這篇會是flask實做Web樹狀結構呈現，
那前端要做到樹狀結構UI的其實不只一種，
像是有JsTree、FancyTree等，
那今天主要使用的是JsTree。

Web樹狀結構呈現

前端呈現的內容點擊可提供下載。後端放 PDF or 圖片 or CSV

後端部分

1.新增一個scan_folder副程式
2.掃描資料夾結構根據 jsTree 規則產生資料夾結構
3.會以迴圈方式掃描資料夾，並根據資料夾或檔案給值
4.會依照不同檔名給不同的圖標

def scan_folder(path):
    data = []
    for item in os.listdir(path):
        item_path = os.path.join(path, item)
        # isdir如果是資料夾
        if os.path.isdir(item_path):
            children = scan_folder(item_path)
            node = {
                "id": item_path,
                "text": item,
                "icon": 'static/treesvg/folder-fill.svg',
                # 如果是資料夾才open，檔案則不用
                "state": {"opened": False if not children else True},
                "children": children
            }
        else:
            # 如果是文件，直接添加
            node = {
                "id": item_path,
                "text": item,
                # 依照不同檔名給不同的icon圖檔
                "icon": f'static/treesvg/filetype-{item.split(".")[-1]}.svg',
                "a_attr": {
                    "href": f"{item_path}"
                }
            }
        data.append(node)
    return data

5.form首頁路徑執行掃描副程式，並將值傳給前端

@form.route('/')
def form_page():
    # 指定要掃描的資料夾位置
    folder_path = "static/TreeFolder"
    folder_structure = json.dumps(scan_folder(folder_path), indent=4)
    return render_template('form.html',folder_structure=folder_structure)

前端部分

1.首先以CDNJS方式載入jsTree相關套件

<!-- Include required CSS and JavaScript libraries for jstree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

2.將前端的值丟入js中，並確保資料準備才呼叫jsTree啟動
3.jsTree加入查詢功能、超連結 ( 下載檔案路徑 )

<div>
    <p>查詢：
        <input type="text" id="plugins4_q" value="" class="input">
    </p>
    <div id="jstree">
    </div>
    <script>
        function initializeJSTree(data) {
            $('#jstree').jstree({
                'core': {
                    'data': data,
                },
                // 展開
                'expand_all': true,
                'plugins': ['search']
            });
            var to = false;
            $('#plugins4_q').keyup(function () {
                if (to) { clearTimeout(to); }
                to = setTimeout(function () {
                    var v = $('#plugins4_q').val();
                    $('#jstree').jstree(true).search(v);
                }, 250);
            });
            $('#jstree').on('select_node.jstree', function (e, data) {
                // 獲取節點的超連結
                var link = data.node.a_attr.href;
                if (link) {
                    // 導航到超連結
                    window.location.href = link;
                }
            });
        }
        // 在確保資料已經準備好時呼叫初始化函數
        $(document).ready(function () {
            var folderStructureData = {{ folder_structure | safe
        }};
        initializeJSTree(folderStructureData);
        });
    </script>
</div>

結語

本篇主要記錄小功能的部分程式碼重點，
若有用到相同功能可以依照程式碼做參考去撰寫~